<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>demo</title>
  <script type="text/javascript" src="../vue.js"></script>
</head>
<style>
  [v-cloak] {
    display: none;
    width: 100px;
    height: 100px;
    background-color: aliceblue;
  }
</style>

<body>
  <div id="app">

    <div>
      <h1>基本类型</h1>
      <p>{{count}}</p>
      <button @click="changeCount">修改基本类型</button>
    </div>

    <div>
      <h1>对象类型</h1>
      <p v-for=" item in  person">{{item}}</p>
      <button @click="addAtribute">增改属性</button>
      <button @click="deteleteAtribute">删除属性</button>
    </div>

  </div>
</body>
<script type="text/javascript">
  Vue.config.productionTip = false;
  const vm = new Vue({
    el: "#app",
    data() {
      return {
        text: "信息",
        count: 0,
        person: {
          name: "一个伤心的人",
          age: 22
        }
      }
    },
    methods: {
      changeCount() {
        this.count += 1
      },
      addAtribute() {
        // Vue.set(this.person, "sex", "男")
        // Vue.$set(this.person,"sex","男")
        Vue.set(this.person, "sex", "男")
      },
      deteleteAtribute() {
        Vue.delete(this.person, "name")
      },
    }
  }
  )

  // setTimeout(() => {
  //   vm.$mount("#app")
  // }, 2000)

</script>

</html>